<!-- 优惠券 -->
<template>
    <div>
        <Tabs :value="search.status" @on-click="tabClick">
            <TabPane label="全部" name=""></TabPane>
            <TabPane label="进行中" name="0"></TabPane>
            <TabPane label="已关闭" name="1"></TabPane>
        </Tabs>
        <div>
            <span>优惠券名称：</span>
            <Input placeholder="请输入优惠券名称" style="width: 200px; margin-left: 10px;"></Input>
            <Button type="primary" icon="ios-search" style="margin-left: 10px;" @click="getList">搜索</Button>
            <Button @click="reset" type="success" icon="ios-refresh" style="margin-left: 10px;">刷新</Button>
            <Button type="info" @click="editCoupon(false)" style="margin-left: 10px;">新增优惠券</Button>
        </div>
        <br>
        <Table :columns="columns" :data="list" ref="selection" @on-sort-change="customSort" :highlight-row="true"
            max-height="800" border stripe @on-selection-change="tableSelect">
            <template slot-scope="{ row , index}" slot="sendTime">
                <div>开始时间：{{ row.start_time }}</div>
                <div>结束时间：{{ row.end_time }}</div>
            </template>
            <template slot-scope="{ row , index}" slot="useLimit">
                <span v-if="row.less_amount == 0">无门槛</span>
                <span v-else>满{{ row.less_amount }}元可用</span>
            </template>
            <template slot-scope="{ row , index}" slot="sendInfo">
                <div style="text-align: left;">
                    <div>发放总量:{{ row.send_num == 0 ? '不限量' : row.send_num }}</div>
                    <div>已发放：{{ row.have_send_num }}</div>
                    <div>待发放:{{ row.send_num == 0 ? '不限量' : row.residue_num }}</div>
                </div>
            </template>
            <template slot-scope="{ row , index}" slot="useTime">
                <span v-if="row.use_day == 0">
                    <div>开始时间：{{ row.use_start_time }}</div>
                    <div>结束时间：{{ row.use_end_time }}</div>
                </span>
                <span v-else> 领券{{ row.use_day }}天可用</span>
            </template>
            <template slot-scope="{ row , index}" slot="statusSlot">
                <i-switch @on-change="statusChange(row.id, row.status)" :value="!row.status">
                    <span slot="open">开</span>
                    <span slot="close">关</span>
                </i-switch>
            </template>
            <template slot-scope="{ row , index}" slot="makeSlot">
                <Button type="success" size="small" @click="editCoupon(row)">编辑</Button>
                <Button type="primary" size="small" style="margin-left: 10px;" @click="sendRecord(row.id)">发放记录</Button>
            </template>
        </Table>
        <!-- <br> -->

        <Paginate :total="total" @on-change="changePage" @on-page-size-change="changeSize">
        </Paginate>
        <!-- 添加优惠券 -->
        <Modal width="700" v-model="datumModal" title="添加优惠券" :footer-hide="true">
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="90">
                <FormItem label="优惠券名称" prop="coupon_name">
                    <Input v-model="formValidate.coupon_name" placeholder="请输入优惠券名称" style="width: 200px;"></Input>
                </FormItem>
                <!-- <FormItem label="发放时间" prop="start_time">
                    <Row>
                        <Col span="8">
                        <FormItem prop="start_time">
                            <DatePicker type="datetime" format="yyyy-MM-dd HH:mm" v-model="formValidate.start_time">
                            </DatePicker>
                        </FormItem>
                        </Col>
                        <Col span="1" style="text-align: center">-</Col>
                        <Col span="8">
                        <FormItem prop="end_time">
                            <DatePicker type="datetime" format="yyyy-MM-dd HH:mm" v-model="formValidate.end_time">
                            </DatePicker>
                        </FormItem>
                        </Col>
                    </Row>
                </FormItem> -->
                <FormItem label="类型">
                    <RadioGroup v-model="formValidate.coupon_type" style="display: flex;">
                        <Radio label="1">折扣券</Radio>
                        <Tooltip content="订单可以打多少折" placement="top">
                            <Icon type="ios-help-circle-outline" size="20" />
                        </Tooltip>
                        <Radio label="0" style="margin-left: 40px;">面额券</Radio>
                        <Tooltip content="优惠券价值多少金额" placement="top">
                            <Icon type="ios-help-circle-outline" size="20" />
                        </Tooltip>
                        <Radio label="2" style="margin-left: 40px;">免单券</Radio>
                        <Tooltip content="订单免单" placement="top">
                            <Icon type="ios-help-circle-outline" size="20" />
                        </Tooltip>
                    </RadioGroup>
                </FormItem>
                <FormItem label="优惠券面额"  v-show="formValidate.coupon_type == 0">
                    <Input v-model="formValidate.amount" placeholder="请输入优惠券面额" style="width: 200px;margin-right: 5px;"
                        type="number"></Input>元
                </FormItem>
                <FormItem label="优惠券折扣"  v-show="formValidate.coupon_type == 1">
                    <Input v-model="formValidate.amount" placeholder="请输入优惠券折扣" style="width: 200px;margin-right: 5px;"
                        type="number"></Input>%
                </FormItem>
                <!-- <FormItem label="发放总量">
                    <RadioGroup v-model="formValidate.send_type" style="display: flex; flex-direction: column;">
                        <Radio label="0">不限制数量</Radio>
                        <Row>
                            <Radio label="1">发放</Radio>
                            <Input v-model="formValidate.send_num" style="width: 180px;margin-right: 5px;"
                                type="number"></Input>张
                        </Row>
                    </RadioGroup>
                </FormItem> -->
                <!-- <FormItem label="使用门槛">
                    <RadioGroup v-model="formValidate.less_type" style="display: flex; flex-direction: column;">
                        <Radio label="0">无使用门槛</Radio>
                        <Row>
                            <Radio label="1">订单满</Radio>
                            <Input v-model="formValidate.less_amount" style="width: 180px;margin-right: 5px;"
                                type="number"></Input>元可用
                        </Row>
                    </RadioGroup>
                </FormItem> -->
                <FormItem label="用券时间">
                    <RadioGroup v-model="formValidate.use_coupon_type" style="display: flex; flex-direction: column;">
                        <Row>
                            <Radio label="0">固定时间</Radio>
                            <DatePicker type="datetime" format="yyyy-MM-dd HH:mm" v-model="formValidate.use_start_time">
                            </DatePicker> -
                            <DatePicker type="datetime" format="yyyy-MM-dd HH:mm" v-model="formValidate.use_end_time">
                            </DatePicker>
                        </Row>
                        <Row style="display: flex;margin-top: 10px;">
                            <Radio label="1">领卷当天起</Radio>
                            <Input v-model="formValidate.use_day" style="width: 200px;margin-right: 5px;"
                                type="number"></Input>天内可用
                        </Row>
                    </RadioGroup>
                </FormItem>
                <FormItem label="领取方式">
                    <RadioGroup v-model="formValidate.type" style="display: flex;">
                        <Radio label="0">新用户赠送</Radio>
                        <Tooltip content="新用户注册赠送" placement="top">
                            <Icon type="ios-help-circle-outline" size="20" />
                        </Tooltip>
                        <Radio label="1" style="margin-left: 40px;">后台发放</Radio>
                        <Tooltip content="后台指定会员赠送优惠券" placement="top">
                            <Icon type="ios-help-circle-outline" size="20" />
                        </Tooltip>
                        <Radio label="2" style="margin-left: 40px;">邀请赠送</Radio>
                        <Tooltip content="后台指定会员赠送优惠券" placement="top">
                            <Icon type="ios-help-circle-outline" size="20" />
                        </Tooltip>
                    </RadioGroup>
                </FormItem>
                <!-- <FormItem label="领取次数" prop="limit_type">
                    <RadioGroup v-model="formValidate.limit_type" style="display: flex; flex-direction: column;">
                        <Radio label="0">不限领取次数</Radio>
                        <Row>
                            <Radio label="1">总计领取</Radio>
                            <Input v-model="formValidate.limit_num1" style="width: 110px;margin-right: 5px;"></Input>次
                        </Row>
                        <Row style="margin-top: 10px;">
                            <Radio label="2">每天限制</Radio>
                            <Input v-model="formValidate.limit_num2" style="width: 110px;margin-right: 5px;"></Input>次
                        </Row>
                    </RadioGroup>
                </FormItem> -->
                <FormItem label="适用商品" prop="use_type">
                    <RadioGroup v-model="formValidate.use_type">
                        <Radio label="0">全部商品可用</Radio>
                        <Radio label="1">指定商品可用</Radio>
                        <Radio label="2">指定商品不可用</Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem label="选择商品" v-show="formValidate.use_type != 0">
                    <Select v-model="formValidate.type_id" multiple style="width:100%" :value="formValidate.type_id">
                        <Option v-for="item in goodsList" :value="item.id" :key="item.id">{{ item.name }},零售价：{{
                            item.sell_price }}</Option>
                    </Select>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
                    <Button @click="handleReset('formValidate')" style="margin-left: 8px">取消</Button>
                </FormItem>
            </Form>
        </Modal>

        <!--发放记录-->
        <Modal width="70" v-model="recordModal" title="发放记录" :footer-hide="true">
            <div class="search" style="border-bottom:1px solid #ccc ;padding-bottom: 10px;">
                用户信息:
                <Input placeholder="昵称、手机号码" style="width: 200px; margin-left: 10px;" v-model="sendSearch.search"></Input>
                使用状态：
                <Select style="width:200px" v-model="sendSearch.status">
                    <Option value="">请选择</Option>
                    <Option value="0">未使用</Option>
                    <Option value="1">已使用</Option>
                </Select>
                <Button type="primary" icon="ios-search" style="margin-left: 10px;" @click="getSendList">搜索</Button>
                <Button @click="reset1" type="success" icon="ios-refresh" style="margin-left: 10px;">刷新</Button>
            </div>
            <Table :columns="sendColumns" :data="sendList" border style="margin-top: 10px;">
            </Table>
            <br>
            <Page :total="sendTotal" show-sizer show-total show-elevator @on-change="changePage1"
                @on-page-size-change="changeSize1">
            </Page>
        </Modal>
    </div>
</template>

<script>
import Paginate from "@/components/paginate/paginate.vue";
import { Row } from 'view-design';

//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
    //import引入的组件需要注入到对象中才能使用
    name:"marketingCoupon",
    components: { Row, Paginate },
    data() {
        var checkEndTime = (rule, value, callback) => {
            if (value) {
                if (value <= this.formItem.start_time) {
                    callback(new Error('发放结束时间不能小于发放开始时间'))
                } else {
                    callback();
                }
            } else {
                callback(new Error('请选择发放开始时间'))
            }

        };
        //这里存放数据
        return {
            total: 0,
            list: [],
            columns: [{
                title: '优惠券名称',
                align: "center",
                key: 'coupon_name',
            },
            {
                title: '类型',
                align: "center",
                key: 'coupon_type',
                render: (h, param) => {
                    let txt = "";
                    if (param.row.coupon_type == 0) {
                        txt = '金额券'
                    }
                    if (param.row.coupon_type == 1) {
                        txt = '折扣券'
                    }
                    if (param.row.coupon_type == 2) {
                        txt = '免单券'
                    }
                    return h('div', txt);
                }
            },
            {
                title: '面额/折扣',
                align: "center",
                width: "100",
                key: 'amount'
            },
            // {
            //     title: '发放时间',
            //     align: "center",
            //     key: 'amount',
            //     slot: "sendTime"
            // },
            // {
            //     title: '使用门槛',
            //     align: "center",
            //     key: 'amount',
            //     slot: "useLimit"
            // },
            {
                title: '发放情况',
                align: "center",
                key: 'amount',
                slot: "sendInfo"
            },
            {
                title: '用券时间',
                align: "center",
                key: 'amount',
                slot: "useTime"
            },
            {
                title: '发放方式',
                align: "center",
                key: 'amount',
                render: (h, param) => {
                    let txt = "";
                    if (param.row.type == 0) {
                        txt = '新用户赠送'
                    }
                    if (param.row.type == 1) {
                        txt = '后台发放'
                    }
                    if (param.row.type == 2) {
                        txt = '邀请赠送'
                    }
                    return h('div', txt);
                }
            },
            {
                title: '状态',
                align: "center",
                key: 'amount',
                slot: "statusSlot"
            },
            {
                title: '创建时间',
                align: "center",
                key: 'create_time',
            }, {
                title: '操作',
                align: "center",
                slot: 'makeSlot',
            }],
            search: {
                coupon_name: "",
                status: "",
            },
            goodsList: [],
            goodsTotal: 0,
            serviceList: [],
            Drawer: false,
            opt_for: [],
            userLoad: false,
            index: '1',
            datumModal: false,
            formValidate: {},
            ruleValidate: {
                coupon_name: [
                    { required: true, message: '请输入优惠券名称', trigger: 'blur' }
                ],
                start_time: [{ required: true, type: 'date', message: '请选择发放开始时间', trigger: 'change' }],
                end_time: [{ required: true, validator: checkEndTime }],
                amount: [
                    { required: true, message: '请输入优惠券面额', trigger: 'blur' },
                ],
            },
            sendType: 0,
            sendGoodsIdArr: [],
            // 领取记录
            recordModal: false,
            sendColumns: [{
                title: '优惠券名称',
                align: "center",
                key: 'coupon_name',
            }, {
                title: '会员头像',
                align: "center",
                key: 'avatar',
                render: (h, param) => {
                    return h("img", {
                        attrs: {
                            src: param.row.avatar
                        },
                        style: {
                            width: '80px',
                            height: '60px'
                        }
                    });
                }
            }, {
                title: '会员昵称',
                align: "center",
                key: 'nick',
            }, {
                title: '手机号',
                align: "center",
                key: 'mobile',
            }, {
                title: '使用状态',
                align: "center",
                key: 'is_used',
                render: (h, param) => {
                    let txt = "未使用";
                    if (param.row.is_used == 1) {
                        txt = "已使用";
                    }
                    return h("div", txt);
                }
            }, {
                title: '领取时间',
                align: "center",
                key: 'create_time',
            }, {
                title: '使用时间',
                align: "center",
                key: 'use_time',
                render: (h, param) => {
                    let txt = "";
                    if (param.row.use_time) {
                        txt = param.row.use_time;
                    }
                    return h("div", txt);
                }
            }],
            sendTotal: 0,
            sendList: [],
            sendSearch: {
                id: 0,
                is_used: "",
                search: "",
                page: 1,
                limit: 10
            },
            tableSelectIdArr: [],
        }
    },
    //计算属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {

    },
    //方法集合
    methods: {
        handleSubmit(name) {
            if (this.formValidate.id == 0) {
                this.$axios('/admin/coupon/add', this.formValidate).then(res => {
                    this.datumModal = false;
                    this.getList();
                });
            } else {
                this.$axios('/admin/coupon/edit', this.formValidate).then(res => {
                    this.datumModal = false;
                    this.getList();
                });
            }
        },
        handleReset(name) {
            this.$refs[name].resetFields();
            this.datumModal = false;
        },
        // 查询优惠卷
        getList() {
            this.$axios('/admin/coupon/getList', this.search).then(res => {
                this.list = res.data;
                this.total = res.total;
            });
        },
        reset() {
            this.getList();
        },
        changePage(page) {
            this.search.page = page;
            this.getList();
        },
        changeSize(size) {
            this.search.limit = size;
            this.getList();
        },
        customSort(column, key, order) {
            this.searchData.order_by = column.key;
            this.searchData.sort = column.order;
            this.getList();
        },
        tableSelect(selection) {
            let arr = [];
            selection.forEach(item => {
                arr.push(item.id);
            });
            this.tableSelectIdArr = arr;
        },
        // 添加优惠券
        editCoupon(row) {
            this.getGoodsList();
            if (row) {
                let info = { ...row };

                this.formValidate = info;
                this.formValidate.send_type = info.send_type + '';
                this.formValidate.coupon_type = info.coupon_type + '';
                if (info.less_amount == 0) {
                    this.formValidate.less_type = "0";
                } else {
                    this.formValidate.less_type = "1";
                }
                if (info.use_day == 0) {
                    this.formValidate.use_coupon_type = "0";
                } else {
                    this.formValidate.use_coupon_type = "1";
                }
                this.formValidate.type = info.type + '';
                this.formValidate.amount = info.amount + '';
                this.formValidate.limit_type = info.limit_type + '';
                this.formValidate.use_type = info.use_type + '';
                let typeIdArr = [];
                if (info.type_id) {
                    info.type_id.forEach(item => {
                        typeIdArr.push(Number(item));
                    })
                }
                this.formValidate.type_id = typeIdArr;
                if (info.limit_type == 1) {
                    this.formValidate.limit_num1 = info.limit_num;
                }
                if (info.limit_type == 2) {
                    this.formValidate.limit_num2 = info.limit_num;
                }
            } else {
                this.formValidate = {
                    id: 0,
                    coupon_name: "",
                    start_time: "",
                    end_time: "",
                    amount: "",
                    send_type: "0",
                    send_num: "",
                    less_type: "0",
                    less_amount: "",
                    use_coupon_type: "0",
                    use_day: "",
                    use_start_time: "",
                    use_end_time: "",
                    type: "0",
                    conpon_type:"1",
                    limit_type: "0",
                    limit_num1: "",
                    limit_num2: "",
                    use_type: "0",
                    type_id: [],
                    goods_name: "",
                    page: 1,
                    limit: 10,
                    appoint: []
                };
            }
            this.datumModal = true;
        },
        tabClick(value) {
            this.search.status = value;
            this.getList();
        },
        serviceChange(value) {
            this.serviceList.push(this.goodsList[value.value]);
        },
        delService(index) {
            this.serviceList.splice(index);
        },
        getGoodsList() {
            this.$axios('/admin/coupon/getGoodsArr', this.from).then(res => {
                this.goodsList = res;
            });
        },
        statusChange(id, status) {
            this.$axios('/admin/coupon/statusChange', { id: id, status: status }).then(res => {
                this.getList();
            });
        },
        // 发放记录
        sendRecord(id) {
            this.sendSearch.id = id;
            this.recordModal = true;
            this.getSendList();
        },
        getSendList() {
            this.$axios('/admin/coupon/record', this.sendSearch).then(res => {
                this.sendList = res.data;
                this.sendTotal = res.total;
            });
        },
        reset1() {
            this.sendSearch.page = 1;
            this.sendSearch.limit = 10;
            this.sendSearch.search = "";
            this.sendSearch.status = "";
            this.getSendList();
        },
        changePage1(page) {
            this.sendSearch.page = page;
            this.getSendList();
        },
        changeSize1(size) {
            this.sendSearch.limit = size;
            this.getSendList();
        },
    },
    created() {
        this.getList();
    },
}
</script>
<style></style>